<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '班级花名册',
	},
}
</route>

<template>
	<view class="page-roster">
		<fly-navbar leftText="班级花名册" backgroundColor="#F6F6F6" fixed />
		<block v-if="thisPage === 1">
			<view class="w-full px-4 mb-6 mt-4 box-border">
				<view class="w-full flex items-center text-[#333] text-[29rpx]">
					班级教师
					<text class="text-[#34A4E2] text-[23rpx]">({{ classInfo.teacher_count }})</text>
				</view>
				<view class="w-full grid grid-cols-2 gap-x-4">
					<view
						class="w-full bg-white rounded-[30rpx] px-4 py-4 box-border flex items-center mt-3"
						v-for="item in classInfo.teacher_list"
						:key="item.user_name"
					>
						<image :src="item.avatar" class="w-[75rpx] h-[75rpx] rounded-[50%] roster-img"></image>
						<text
							class="ml-2 text-[#303030] text-[28rpx] line-clamp-2"
							style="max-width: calc(100% - 91rpx)"
							>{{ item.user_name }}</text
						>
					</view>
				</view>
			</view>
			<view class="w-full px-4 mb-6 mt-6 box-border">
				<view class="w-full flex items-center text-[#333] text-[29rpx]">
					学生
					<text class="text-[#34A4E2] text-[23rpx]">({{ classInfo.student_count }})</text>
				</view>
				<view class="w-full grid grid-cols-2 gap-x-4">
					<view
						class="w-full bg-white rounded-[30rpx] px-4 py-4 box-border flex items-center mt-3"
						v-for="item in classInfo.student_list"
						:key="item.user_name"
					>
						<image :src="item.avatar" class="w-[75rpx] h-[75rpx] rounded-[50%] roster-img"></image>
						<text
							class="ml-2 text-[#303030] text-[28rpx] line-clamp-2"
							style="max-width: calc(100% - 91rpx)"
							>{{ item.user_name }}</text
						>
					</view>
				</view>
			</view>
			<view class="w-full justify-center items-center flex mt-8 mb-8 box-border">
				<view class="w-[430rpx] relative h-[105rpx]">
					<image
						class="w-full h-full absolute left-[50%] -translate-x-[50%] top-0 z-1"
						:src="baseImg + '/my/personal-success.png'"
					></image>
					<view
						@tap="logout"
						class="w-full h-full flex justify-center items-center absolute text-[#F4F7F4] text-[32rpx] left-[50%] -translate-x-[50%] top-0 z-2"
						>退出班级</view
					>
				</view>
			</view>
		</block>
		<no-page v-if="thisPage === 0" :title="title" :type="type"></no-page>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { getClassRoster } from '@/service/class';
import { useUserStore } from '@/store';
import { userExitClass } from '@/service/user';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const classInfo = ref(null);
const thisPage = ref(-1);
const title = ref('服务器异常');
const type = ref('btn');
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

onShow(() => {
	if (userInfo.value.class_id) {
		getClass();
	} else {
		thisPage.value = 0;
		title.value = '参数错误,请返回重试';
		type.value = 'msg';
	}
});

const getClass = async () => {
	uni.showLoading({
		icon: 'none',
		title: '加载中...',
	});
	try {
		const res = await getClassRoster({ class_id: userInfo.value.class_id });
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			classInfo.value = res.data;
		} else {
			thisPage.value = 0;
			title.value = !res.data ? res.message : '服务器异常';
			type.value = 'btn';
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = error.message;
		type.value = 'btn';
	}
};

const logout = () => {
	uni.showModal({
		title: '提示',
		content: '是否退出当前班级?',
		async success(res) {
			if (res.confirm) {
				uni.showLoading({
					title: '退出中...',
				});
				try {
					const res = await userExitClass(userInfo.value.student_id);
					uni.hideLoading();
					if (res.status_code === 200) {
						userStore.setUserInfo({
							...userInfo.value,
							class_id: null,
							class_name: '',
						});
						uni.showToast({
							icon: 'none',
							title: '退出成功',
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 2000);
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message,
						});
					}
				} catch (error) {
					uni.showToast({
						icon: 'none',
						title: '退出失败',
					});
				}
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		},
	});
};
</script>

<style lang="scss">
page {
	background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.roster-img {
	background: #d1d1d1;
	border: 2rpx solid #f3f1f3;
}
</style>
